<template>
  <div id="app" style="height: 2000px">
    <el-row :span="24" type="flex">
      <el-col :span="5"><h3>立项申请</h3></el-col>
    </el-row>
    <el-divider style="margin: 10px"></el-divider>
    <el-steps :space="200" :active="1" finish-status="success" style="margin: 20px auto">
      <el-step title="售前"></el-step>
      <el-step title="立项"></el-step>
      <el-step title="工艺"></el-step>
      <el-step title="设计"></el-step>
      <el-step title="制造"></el-step>
      <el-step title="交付"></el-step>
      <el-step title="归档"></el-step>
      <el-step title="售后"></el-step>
    </el-steps>
    <el-form ref="form" :model="initForm"  label-width="100px" size="small" inline="true">
      <el-form-item label="项目号">
        <el-input v-model="initForm.id" disabled="true" style="width: 400px"></el-input>
      </el-form-item>
<!--      <el-form-item label="客户名称">
        <el-input v-model="initForm.name" disabled="true"></el-input>
      </el-form-item>-->
      <el-form-item label="设备名称">
        <el-input v-model="initForm.name1" style="width: 400px"></el-input>
      </el-form-item>
      <br>
<!--      <el-form-item label="技术支持" disabled="true">
        <el-input v-model="initForm.supporter" disabled="true"></el-input>
      </el-form-item>-->
      <el-form-item label="型号">
        <el-cascader
            :options="initForm.optionsModel"
            :props="initForm.props2"
            clearable  style="width: 400px">
        </el-cascader>
      </el-form-item>
      <el-form-item label="数量">
        <el-input v-model="initForm.num"  style="width: 400px"></el-input>
      </el-form-item>
      <br>
      <el-form-item label="起止时间">
        <el-date-picker
            v-model="initForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"  style="width: 400px">
        </el-date-picker>
      </el-form-item>

<!--      <el-form-item label="控制系统">
        <el-input placeholder="请输入内容" v-model="initForm.system" class="input-with-select">
          <el-select v-model="initForm.systemSelect" slot="prepend" placeholder="请选择" style="width: 100px">
            <el-option label="西门子" value="1"></el-option>
            <el-option label="倍福" value="2"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="外观示意图">
        <div class="demo-image__preview">
          <el-image
              style="width: 100px; height: 100px"
              :src="initForm.imgUrl"
              :preview-src-list="srcList">
          </el-image>
        </div>
      </el-form-item>-->
      <el-form-item label="项目负责人">
        <el-input v-model="initForm.header" disabled="true"  style="width: 400px"></el-input>
      </el-form-item>
      <br>
      <el-form-item label="销售合同">
        <el-radio v-model="initForm.radio" label="1">有</el-radio>
        <el-radio v-model="initForm.radio" label="2">无</el-radio>
      </el-form-item>
      <br>
      <el-form-item label="合同上传" v-if="initForm.radio === '1'">
          <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="fileList" style="width: 400px">
            <el-button size="small" type="text">上传盖章版本</el-button>
            <el-button type="text" size="small">使用模版在线制作</el-button>
          </el-upload>
        <el-descriptions :column="4" border>
          <el-descriptions-item label="合同价格" label-class-name="my-label" content-class-name="my-content"></el-descriptions-item>
          <el-descriptions-item label="付款方式"></el-descriptions-item>
          <el-descriptions-item label="数量"></el-descriptions-item>
          <el-descriptions-item label="时间"></el-descriptions-item>
          <el-descriptions-item label="交付地"></el-descriptions-item>
          <el-descriptions-item label="违约责任"></el-descriptions-item>
        </el-descriptions>
      </el-form-item>
      <el-form-item label="说明" v-if="initForm.radio === '2'">
        <el-input disabled="true"  style="width: 400px" placeholder="没有销售合同说明"></el-input>
      </el-form-item>
      <el-form-item label="预计完成时间" v-if="initForm.radio === '2'">
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"  style="width: 400px">
        </el-date-picker>
      </el-form-item>
      <br>
      <el-form-item label="技术协议">
        <el-radio v-model="initForm.radio1" label="1">有</el-radio>
        <el-radio v-model="initForm.radio1" label="2">无</el-radio>
      </el-form-item>
      <br>
      <el-form-item label="技术协议上传" v-if="initForm.radio1 === '1'">
          <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="fileList" style="width: 400px">
            <el-button size="small" type="text">上传盖章版本</el-button>
            <el-button type="text" size="small">使用模版在线制作</el-button>
          </el-upload>
        <el-descriptions :column="4" border>
          <el-descriptions-item label="配置" label-class-name="my-label" content-class-name="my-content"></el-descriptions-item>
          <el-descriptions-item label="电气"></el-descriptions-item>
          <el-descriptions-item label="工艺"></el-descriptions-item>
          <el-descriptions-item label="交付"></el-descriptions-item>
        </el-descriptions>
      </el-form-item>
      <el-form-item label="说明" v-if="initForm.radio1 === '2'">
        <el-input disabled="true"  style="width: 400px" placeholder="没有技术协议说明"></el-input>
      </el-form-item>
      <el-form-item label="预计完成时间" v-if="initForm.radio1 === '2'">
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"  style="width: 400px">
        </el-date-picker>
      </el-form-item>
      <br>
      <el-form-item label="其它文件">
        <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="fileList" style="width: 400px">
          <el-button size="small" type="text">上传盖章版本</el-button>
        </el-upload>


      </el-form-item>
      <br>
      <el-form-item label="备注">
        <el-input type="textarea" rows="3" placeholder="请输入内容" v-model="initForm.desc" style="width: 900px">
        </el-input>
      </el-form-item>
<br>
      <el-form-item>
        <el-button type="primary" size="mini" @click="submit()">提交</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
export default {
  name: "ProjectApproval",
  data() {
    return {
      value1:'',
      initForm: {
        radio:'',
        radio1:'',
        time:'',
        id: "",
        name: '',
        name1:'',
        num:'',
        system: '',
        header: '',
        supporter:'',
        imgUrl:'',
        systemSelect:'',
        desc: '',
        props2: {multiple: true},
        optionsModel: [{
          value: 1,
          label: '标机',
          children: [{
            value: 2,
            label: 'E',
            children: [
              {value: 3, label: 'TS'},
              {value: 4, label: 'LM'},
              {value: 5, label: 'DLM'}
            ]
          }, {
            value: 7,
            label: 'P',
            children: [
              {value: 8, label: '工具'},
              {value: 9, label: '产品'},

            ]
          }, {
            value: 12,
            label: 'R',
            children: [
              {value: 13, label: '课题'},
              {value: 14, label: '其他'},
            ]
          }]
        },
          {
            value: 17,
            label: '定制',
          }
        ],
      }
    }
  },
  methods: {
    submit() {
      location = "node_plan"
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
}
</script>

<style scoped>
.my-label {
  background: #E1F3D8;
}

.my-content {
  background: #FDE2E2;
}
.el-descriptions{
  width: 1200px
}
</style>